<template>
  <div class="fdDetail">
    <a-card class="flex">
      <div class="flex flex-a-c">
        <a-avatar :size="100" class="mr-50" shape="circle" :imageUrl="userInfo.userAvatar" v-if="userInfo.userAvatar">
        </a-avatar>
        <a-avatar
          v-else
          :size="100"
          class="mr-50"
          shape="circle"
          imageUrl="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9123.png~tplv-uwbnlip3yd-webp.webp"
        >
        </a-avatar>
        <a-descriptions :column="2">
          <a-descriptions-item label="邀请码：">
            {{ userInfo.inviteCode }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号：">
            {{ userInfo.mobile }}
          </a-descriptions-item>
          <a-descriptions-item label="最近提现：" :span="12">
            {{ userInfo.lastWithdrawalTime }}
          </a-descriptions-item>
          <a-descriptions-item label="最近到账：" :span="12">
            {{ userInfo.lastWithdrawalSuccessTime }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <a-space size="large">
        <a-statistic
          title="账户余额"
          :value="withdrawalAmountInfo.userMoney - 0 || 0"
          show-group-separator
          :animation="true"
          :precision="2"
        >
          <template #prefix>￥</template></a-statistic
        >
        <a-statistic
          title="本月提现"
          :value="withdrawalAmountInfo.currentMonthTotalWithdrawalAmount - 0 || 0"
          show-group-separator
          :animation="true"
          :precision="2"
        >
          <template #prefix>￥</template></a-statistic
        >
        <a-statistic
          title="上月提现"
          :value="withdrawalAmountInfo.lastMonthTotalWithdrawalAmount - 0 || 0"
          show-group-separator
          :precision="2"
          :animation="true"
        >
          <template #prefix>￥</template></a-statistic
        >
        <a-statistic
          title="累计提现"
          :value="withdrawalAmountInfo.totalWithdrawalAmount - 0 || 0"
          show-group-separator
          :animation="true"
          :precision="2"
        >
          <template #prefix>￥</template></a-statistic
        >
      </a-space>
    </a-card>
    <a-card :bordered="false" class="gi_card mt-20 flex-1">
      <div class="tab-box">
        <a-tabs position="top" v-model:active-key="selectedKey">
          <a-tab-pane key="1" title="账号信息">
            <p class="text-size-18 font-bold title">
              提现账户
              <!-- <a-button type="text" size="small" @click="onChangeMehtod()"
                ><template #icon> <icon-swap /> </template>切换提现方式</a-button
              > -->
            </p>
            <div class="my-40 flex">
              <p><label>姓名：</label>{{ receiveAccountInfo.method1Account.realName || '暂无' }}</p>
              <p><label>支付宝：</label>{{ receiveAccountInfo.method1Account.alipayUserName || '暂无' }}</p>
            </div>
            <div class="my-40 flex">
              <p :span="3"><label>户名：</label>{{ receiveAccountInfo.method2Account.bankCardFullName || '暂无' }}</p>
              <p :span="5"><label>银行卡号：</label>{{ receiveAccountInfo.method2Account.bankCardNum || '暂无' }}</p>
              <p :span="3"><label>开户行：</label>{{ receiveAccountInfo.method2Account.bankCardName || '暂无' }}</p>
              <p :span="5">
                <label>手机号：</label>{{ receiveAccountInfo.method2Account.bankCardFullMobile || '暂无' }}
              </p>
            </div>
            <div class="my-40 flex">
              <p :span="8" class="flex flex-a-s">
                <label>身份证正面照：</label
                ><a-image
                  width="200px"
                  height="150px"
                  :src="receiveAccountInfo.idCardAccount.idCardJustImgUrl"
                  v-if="receiveAccountInfo.idCardAccount.idCardJustImgUrl"
                /><a-image width="200" height="150" src="some-error.png" v-else />
              </p>
              <p :span="8" class="flex flex-a-s">
                <label>身份证背面照：</label
                ><a-image
                  width="200px"
                  height="150px"
                  :src="receiveAccountInfo.idCardAccount.idCardBackImgUrl"
                  v-if="receiveAccountInfo.idCardAccount.idCardBackImgUrl"
                /><a-image width="200" height="150" src="some-error.png" v-else />
              </p>
              <!-- <a-col :span="8" class="flex flex-a-s"
                ><label>银行卡照：</label
                ><a-image
                  width="200px"
                  height="150px"
                  :src="receiveAccountInfo.idCardAccount.idCardBackImgUrl"
                  v-if="receiveAccountInfo.idCardAccount.idCardBackImgUrl" /><a-image
                  width="200"
                  height="150"
                  src="some-error.png"
                  v-else
              /></a-col> -->
            </div>
          </a-tab-pane>

          <a-tab-pane key="2" title="操作日志">
            <GiTable
              row-key="id"
              id="fdProcessHandLog"
              v-model:columns="columns"
              :loading="loading"
              :data="tableData"
              :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
              :row-selection="{ type: 'checkbox', showCheckedAll: true }"
              :pagination="pagination"
              v-model:selectedKeys="selectedKeys"
              @refresh="getTableData"
            ></GiTable>
          </a-tab-pane>
          <a-tab-pane key="3" title="当前提现详情">
            <a-descriptions :column="1" v-if="rowInfo.inviteCode">
              <a-descriptions-item label="邀请码：">
                {{ rowInfo.inviteCode }}
              </a-descriptions-item>
              <a-descriptions-item label="手机号：">
                {{ rowInfo.mobile }}
              </a-descriptions-item>
              <a-descriptions-item label="提现金额："> ￥{{ rowInfo.withdrawalAmount }} </a-descriptions-item>
              <a-descriptions-item label="到账金额："> ￥{{ rowInfo.receiveAmount }} </a-descriptions-item>
              <a-descriptions-item label="提现时间：">{{ rowInfo.withdrawalTime }} </a-descriptions-item>
              <a-descriptions-item label="到账时间：">{{ rowInfo.receiveTime }} </a-descriptions-item>
              <a-descriptions-item label="提现凭证：">{{ rowInfo.withdrawalNo }} </a-descriptions-item>
              <a-descriptions-item label="提现账号：">
                {{ rowInfo.withdrawalAccountInfo.withdrawalMethod == 1 ? '支付宝' : '银行卡' }}：{{
                  rowInfo.withdrawalAccountInfo.withdrawalName
                }}
                {{ rowInfo.withdrawalAccountInfo.withdrawalAccount }}</a-descriptions-item
              >
              <a-descriptions-item label="打款账户：">
                {{ rowInfo.payAccountInfo.payTypeName + '：' + rowInfo.payAccountInfo.account }}
              </a-descriptions-item>
              <a-descriptions-item label="提现状态：">
                {{ rowInfo.statusName }}
              </a-descriptions-item>
              <a-descriptions-item label="备注：">
                {{ rowInfo.msg }}
              </a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
        </a-tabs>
      </div></a-card
    >
    <WithdrawalModal ref="WithdrawalModalRef" @getTableData="getTableData"></WithdrawalModal>
  </div>
</template>
<script setup>
import { financeUserReceiveInfo, financeUserHandLog } from '@/apis'
import { usePagination } from '@/hooks'
import WithdrawalModal from './WithdrawalModal.vue'
defineOptions({ name: 'fdProcessDetail' })
const WithdrawalModalRef = ref()
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 15 })
const loading = ref(false)
const tableData = ref([])
const route = useRoute()
const selectedKey = ref('1')
const selectedKeys = ref([])
const rowInfo = ref(false)
const key = route.fullPath
if (sessionStorage.getItem(key) || history.state.item) {
  if (history.state.item) {
    sessionStorage.setItem(key, history.state.item)
  } else {
    history.state.item = sessionStorage.getItem(key)
  }
  rowInfo.value = JSON.parse(history.state.item)
}
const receiveAccountInfo = ref({
  method1Account: {
    realName: '',
    alipayUserName: ''
  },
  method2Account: {
    bankCardFullName: '',
    bankCardName: '',
    bankCardNum: '',
    bankCardFullMobile: ''
  },
  method3Account: {
    alipayName: '',
    alipayUserName: '',
    mobile: '', //手机号码
    idCardNum: ''
  },
  idCardAccount: {
    idCardJustImgUrl: '',
    idCardBackImgUrl: ''
  }
})
const withdrawalAmountInfo = ref({
  totalWithdrawalAmount: '',
  userMoney: '',
  currentMonthTotalWithdrawalAmount: '',
  lastMonthTotalWithdrawalAmount: ''
})
const userInfo = ref({
  inviteCode: '',
  mobile: '', //手机号码
  userAvatar: '',
  lastWithdrawalTime: '',
  lastWithdrawalSuccessTime: ''
})
const columns = ref([
  {
    title: '操作人',
    width: 100,
    dataIndex: 'adminUsername'
  },
  {
    title: '操作类型',
    width: 150,
    dataIndex: 'typeName'
  },
  {
    title: '操作内容',
    width: 250,
    dataIndex: 'content'
  },
  {
    title: '操作时间',
    width: 180,
    dataIndex: 'handleAt'
  },

  {
    title: '备注',
    width: 150,
    dataIndex: 'statusName'
  }
])

const getDetail = async () => {
  const res = await financeUserReceiveInfo({ userId: route.query.userId })
  receiveAccountInfo.value = res.data.receiveAccountInfo
  userInfo.value = res.data.userInfo
  withdrawalAmountInfo.value = res.data.withdrawalAmountInfo
}
getDetail()

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    const res = await financeUserHandLog({
      userId: route.query.userId,
      page: pagination.current,
      pageSize: pagination.pageSize
    })
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}
getTableData()
// 更改提现账户
const onChangeMehtod = () => {
  WithdrawalModalRef.value?.openModal({ userId: route.query.userId, id: route.query.id })
}
</script>
<style lang="less" scoped>
.fdDetail {
  height: 100%;
  overflow: hidden;
  margin: var(--margin);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  :deep(.arco-card-body) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  :deep(.arco-statistic-content) {
    text-align: center;
  }
  :deep(.arco-statistic-title) {
    text-align: right;
  }
  .tab-box {
    width: 100%;
    :deep(.arco-col),
    .title {
      font-size: 16px;
    }
    p {
      font-size: 14px;
      color: var(--color-text-1);
      margin-right: 28px;
      label {
        color: var(--color-text-3);
      }
    }
  }
}
</style>
